<template>
  <navigator :url="'/subpackage/classlist/classlist?id='+item._id+'&name='+item.name" class="select-container" v-if="!isFlag" >
  <image :src="item.picurl" mode="aspectFill"></image>
  <!-- 磨砂 -->
  <view class="mosha">
    <text>{{item.name}}</text>
  </view>
  <view class="tip" v-if="formatTime(item.updateTime)">
    {{formatTime(item.updateTime)}}更新
  </view>
  </navigator>
 
  <!-- 更多 -->
  <navigator url="/pages/classify/classify" open-type="switchTab" class="more" v-else>
    <image src="../../common/images/more.jpg" mode="aspectFill"></image>
   <view class="box">
     <view class="icon"><uni-icons color="#fff" type="more-filled" size="50"></uni-icons></view>
     <text>更多</text>
   </view>
  </navigator>
</template>

<script setup>
  import {formatTime} from '@/utils/common.js'
  defineProps({
    isFlag:{
      type:Boolean,
      default:false,
    },
    item:{
      type:Object,
      default:()=>{}
    }
  })
</script>

<style lang="scss">
.select-container{
  // width: 220rpx;
  height: 350rpx;
  position: relative;
   border-radius: 10rpx;
   overflow: hidden;
  image{
   
    width: 100%;
    height: 100%;
  }
  .mosha{
    width: 220rpx;
    height: 70rpx;
    position: absolute;
    left: 2rpx;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    text-align: center;
    backdrop-filter: blur(20rpx);
    
    text{
      line-height: 70rpx;
      font-size: 34rpx;
      font-weight: 600;
      color: #fff;
    }
    
  }
  .tip{
    position: absolute;
    top:0;
    left: 0;
     background-color: #ffaa7f;
     color: #fff;
     padding: 4rpx 10rpx;
     border-radius: 0 0 10rpx 0;
  }
}

.more{
  height: 350rpx;
  position: relative;
   border-radius: 10rpx;
   overflow: hidden;
   image{
     width: 100%;
     height: 100%;
   }
   .box{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     backdrop-filter: blur(20rpx);
     text{
       font-size: 30rpx;
       color: #fff;
     }
   }
}
</style>